import React, { useEffect, useState } from 'react'
import logo from '../../logo.svg'
import './index.css'
import { Cell, Input, hooks, Button } from 'react-vant'
import { useNavigate, useParams } from 'react-router-dom'
import axios from 'axios'

import { Sidebar, Popup, PopupPosition } from 'react-vant';
import '../text/index.css'
interface dataType {
    code: number,
    name: string,
    children?: dataType[]
}
const Home: React.FC = () => {
    const navigate = useNavigate()
    const [states, updateState] = hooks.useSetState({
        text: '',
        tel: ''
    })
    const [data, getData] = useState<dataType[]>([])
    const [active, setActive] = useState(0);
    const [state, setState] = useState<PopupPosition>('')
    const [statec, setStates] = useState<PopupPosition>('')
    const [name, setName] = useState<string>('')
    const onClose = () => setState('')
    const onCloses = () => setStates('')
    const listClikc = () => {
        const token = localStorage.getItem('token')
        if (token) {
            navigate('/list', { state: { ...states, name: name } })
        } else {
            navigate('/login')
        }
    }
    const getDataAxios = async () => {
        const resp = await axios.get('/api/data')
        getData(resp.data.data)
    }
    const cityClick = (name: string) => {
        setStates('left')
        setState('right')
        setName(name)
    }
    useEffect(() => {
        getDataAxios()
    }, [])
    return (
        <div className='home'>
            <div className='home-nav'>
                <dl>
                    <dt><img src={logo} alt="" /></dt>
                    <dd>
                        <div>宝马</div>
                        <div>525LI 豪华套装</div>
                    </dd>
                </dl>
            </div>
            <div className="p">个人信息</div>
            <div className="ipt">
                <div className='ipt-div'>
                    <span className='span'>名字：</span>
                    <Cell>
                        <Input
                            value={states.text}
                            onChange={text => updateState({ text })}
                            placeholder='请输入文本'
                        />
                    </Cell>
                </div>
                <div className='ipt-div'>
                    <span className='span'>手机号：</span>
                    <Cell>
                        <Input
                            value={states.tel}
                            type='tel'
                            onChange={tel => updateState({ tel })}
                            placeholder='请输入手机号'
                        />
                    </Cell>
                </div>
                <div className='ipt-div'>
                    <span className='span'>城市：</span>
                    <Cell>
                        <Input
                            value={name}
                            type='tel'
                            onChange={tel => updateState({ tel })}
                            placeholder='请输入城市'
                            onClick={() => setState('left')}
                        />
                    </Cell>
                </div>
                <div className='btn'>
                    <div className='demo-button'>
                        <Button type='primary' onClick={() => listClikc()}>咨询最低价</Button>
                    </div>
                </div>
            </div>
            <div>
                <Popup
                    visible={state === 'left'}
                    style={{ width: '100%', height: '100%' }}
                    position='left'
                    onClose={onClose}
                >
                    <div className='text'>
                        <div>
                            <Sidebar
                                value={active}
                                onChange={(v) => {
                                    setActive(v);
                                }}
                            >
                                {
                                    data.map(v => {
                                        return <Sidebar.Item title={v.name} key={v.code} onClick={()=>setStates('right')} />
                                    })
                                }
                            </Sidebar>
                        </div>
                        <div>

                            <Popup
                                visible={statec === 'right'}
                                style={{ width: '50%', height: '100%' }}
                                position='right'
                                onClose={onCloses}
                            >
                                <Sidebar>
                                    {
                                        data.length > 0 ? data[active].children!.map(v => {
                                            return <Sidebar.Item title={v.name} key={v.code} onClick={() => cityClick(v.name)} />
                                        }) : <Sidebar.Item title={''} />
                                    }
                                </Sidebar>
                            </Popup>
                        </div>
                    </div>
                </Popup>
            </div>
        </div>
    )
}

export default Home